<template>
  <div class="section" ref="parent">
    <div class="border-row"></div>
    <div class="border-col"></div>
    <div class="section-header">最新政策</div>
    <div class="list-content" :style="chartsDom">

      <swiper :options="swiperOption2" ref="mySwiper" v-if="list.length" :style="chartsDom">
        <!-- slides -->
        <swiper-slide v-for="(item, index) in list" :key="index">
          <div class="list-item">
            <el-row type="flex" justify="space-between" algn="center">
              <div>{{item.name}}</div>
              <div>{{item.value}}</div>
            </el-row>
          </div>
        </swiper-slide>
      </swiper>
      
    </div>
  </div>
</template>
<script>
import { getPolicyNewPolicy } from '@/api/data'
export default {
  data() {
    return {
      chartsDom: {},
      list: []
    }
  },
  props: ['height','dateProp'],
  computed: {
    setStyle: {
      get() {
        return this.$refs.parent.offsetWidth
      },
      set(val) {
        this.chartsDom = {
        width: val - 30 + 'px',
        height: this.height - 30 - 31 + 'px',
        'z-index': 100,
        position: 'relative',
        // 'background-color': 'red'
      }
      }
    }
  },
  mounted() {
    this.setStyle = this.setStyle;
    this.init();
  },
  methods: {
    init() {
      getPolicyNewPolicy(this.dateProp)
      .then(res=>{
        if(res.data.data && res.data.data.length > 0) {
          this.list = res.data.data
        }else{

        }
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%

  .list-content
    width 100%
    height 100%
    overflow scroll
    list-style none
  .list-item
    margin 0 15px
    background-color rgba(14,51,102,.5)
    padding 0 15px
    height 36px
    line-height 36px
    box-shadow 0 0 5px rgba(55,85,218,.3) inset
    margin-top 10px
    color rgba(255, 255, 255, 0.7)
    font-size 14px
    white-space nowrap
    div:first-child
      flex 1
      overflow hidden
      text-overflow ellipsis
    div:nth-child(2)
      width auto
</style>